<template>
  <div>
    <!-- 小窗 -->
    <div
      class="new-user-home-fixed"
      v-if="isShowFixedBox"
      @click="goToDetail(1)"
    >
      <div class="new-user-home-fixed-close" @click.stop="closeFixedBox"></div>
      <img
        :src="parseResourceUrl(dialogConfig.b_url)"
        alt=""
        class="new-user-home-fixed-img"
      />
      <div class="new-user-home-fixed-btn"></div>
      <div v-if="+dialogConfig.status === 1" class="new-user-home-fixed-time">
        <div class="new-user-home-fixed-time-count new-user-home-fixed-time-h">
          {{ minute }}
        </div>
        <div class="new-user-home-fixed-time-text">:</div>
        <div class="new-user-home-fixed-time-count new-user-home-fixed-time-m">
          {{ second }}
        </div>
        <div class="new-user-home-fixed-time-text">:</div>
        <div class="new-user-home-fixed-time-count new-user-home-fixed-time-s">
          {{ mSecond }}
        </div>
      </div>
    </div>
    <!-- 新用户领取课程弹窗 -->
    <div class="new-user-home-dialog" v-if="isShowdialog">
      <div class="new-user-home-dialog-cont">
        <!-- <img
          src="//image.zlketang.com/public/news/images/guanwangPic/home_fixed_new_user_close.png"
          alt="关闭按钮"
          class="new-user-home-dialog-close"
          @click="isShowdialog = false"
        /> -->
        <div
          class="new-user-home-dialog-close"
          @click="isShowdialog = false"
        ></div>
        <img
          :src="parseResourceUrl(dialogConfig.h_url)"
          alt=""
          class="new-user-home-dialog-img"
        />
        <!-- <img
          src="//image.zlketang.com/public/news/images/guanwangPic/home_fixed_new_user_btn.png"
          alt=""
          class="new-user-home-dialog-btn"
          @click="goToDetail(2)"
        /> -->
        <div class="new-user-home-dialog-btn" @click="goToDetail(2)"></div>
        <div
          v-if="+dialogConfig.status === 1"
          class="new-user-home-dialog-time"
        >
          <div
            class="new-user-home-dialog-time-count new-user-home-dialog-time-h"
          >
            {{ minute }}
          </div>
          <div class="new-user-home-dialog-time-text">:</div>
          <div
            class="new-user-home-dialog-time-count new-user-home-dialog-time-m"
          >
            {{ second }}
          </div>
          <div class="new-user-home-dialog-time-text">:</div>
          <div
            class="new-user-home-dialog-time-count new-user-home-dialog-time-s"
          >
            {{ mSecond }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import entryStore from '@/store/entry_store'
export default {
  data: function() {
    return {
      hour: 0,
      minute: 0,
      second: 0,
      mSecond: 0,
      countDownTimer: null,
      //是否显示小窗悬浮窗
      isShowFixedBox: true,
      //是否显示弹窗
      isShowdialog: false,
      zlaBtn: {
        key_name: '',
        key_content: ''
      }
    }
  },
  props: {
    dialogConfig: {
      type: Object,
      default: () => ({})
    }
  },
  beforeMount() {
    entryStore.loadModule(this.$store, ['user'])
  },
  mounted: function() {
    this.storage.init()
    this.init()
  },
  destroyed() {
    if (this.countDownTimer) {
      clearInterval(this.countDownTimer)
      this.countDownTimer = null
    }
  },
  methods: {
    init() {
      let _this = this
      this.dealCountDown()
      this.countDownTimer = setInterval(function() {
        _this.dealCountDown()
      }, 100)
      this.judgeFirstTime()
    },
    //判断是否当天第一次进入
    judgeFirstTime() {
      //存入当天23:59:59时间戳，用来判断是否当天第一次进入页面
      let currentDayTime = storage.get('firstComeTime') || ''
      let secondDialogTime = storage.get('secondDialogTime') || ''
      let currentDayTimeStamp = new Date(
        new Date(new Date().toLocaleDateString()).getTime() +
          24 * 60 * 60 * 1000 -
          1
      ).getTime()
      // 不存在缓存 第一次访问或者是新用户刚登陆时访问
      if (!currentDayTime) {
        this.zlaBtn = {
          key_name: '热门弹窗',
          key_content: '热门弹窗'
        }
        storage.set('firstComeTime', currentDayTimeStamp)
        // wxj
        this.isShowdialog = true
      } else {
        // 新的一天进入
        if (+currentDayTime < +currentDayTimeStamp) {
          storage.set('firstComeTime', currentDayTimeStamp)
          this.isShowdialog = true
        } else {
          // 当天再次进入，
          this.isShowdialog = false
        }
        if (+secondDialogTime >= +currentDayTimeStamp) {
          this.isShowFixedBox = false
        }
      }
    },
    dealCountDown: function() {
      let nowTime = Date.now()
      let temp_data = new Date().toDateString()
      let endTime = new Date(temp_data).getTime() + 86400000 - 1
      let timeDiffs = endTime - nowTime
      let timeDiff = Math.round(timeDiffs / 1000)
      let hour =
        parseInt((timeDiff / 3600) % 24) + parseInt(timeDiff / 3600 / 24) * 24
      let minute = parseInt((timeDiff / 60) % 60)
      let second = timeDiff % 60
      let mSecond =
        Math.floor(timeDiffs - (hour * 3600 + minute * 60 + second) * 1000) +
        500
      mSecond = Math.abs(mSecond)
      // hour = filterTime(hour)
      this.minute = this.filterTime(minute)
      this.second = this.filterTime(second)
      this.mSecond = this.filterTime(mSecond, 3)
    },
    //时间补0   num 位数
    filterTime: function(time, num) {
      if (!num) num = 2
      if (String(time).length < num) {
        let numStr = []
        for (let i = 0; i < num - String(time).length; i++) {
          numStr.push('0')
        }
        time = numStr.join('') + '' + time
      }
      return time
    },
    closeFixedBox: function() {
      this.isShowFixedBox = false
      // 主动关闭小弹窗时,将当天的自然日存入缓存，当天不在展示
      storage.set(
        'secondDialogTime',
        new Date(
          new Date(new Date().toLocaleDateString()).getTime() +
            24 * 60 * 60 * 1000 -
            1
        ).getTime()
      )
      clearInterval(this.countDownTimer)
      this.countDownTimer = null
    },

    goToNewUserActivity() {
      storage.set('isGiftClick', 1)
      sessionStorage.setItem('get_gift', 1)
      this.$store.commit('user/setIsShowGift', true)
    },
    goToDetail: function(type) {
      this.zlaBtn = {
        key_name: +type === 1 ? '热门弹窗' : '弹窗_领取',
        key_content: +type === 1 ? '热门弹窗' : '弹窗_领取'
      }

      if (+type === 2) {
        this.isShowdialog = false
      }
      this.goToNewUserActivity()
    },
    // 之了数据点击
    sendZlaClick() {
      this.keyClick({
        ...this.zlaBtn
      })
    }
  },
  watch: {
    zlaBtn: {
      handler() {
        this.sendZlaClick()
      },
      deep: true
    }
  }
}
</script>

<style>
/* 新用户领课程悬浮窗          */

.new-user-home-fixed {
  position: fixed;
  top: 220px;
  right: 100px;
  width: 135px;
  height: 110px;
  cursor: pointer;
  z-index: 2023;
}

.new-user-home-fixed-img {
  position: absolute;
  top: 0;
  left: 5px;
  width: 122px;
  height: 90px;
}

.new-user-home-fixed-btn {
  background: url('//image.zlketang.com/public/news/homepage-sprite.png?x-image-process=cq100w100')
    no-repeat 38.796% 48.185%;
  --zoom: 0.66;
  background-size: calc(var(--zoom) * 897px) calc(var(--zoom) * 1153px);
  position: absolute;
  top: 72px;
  left: calc(50% - 55px);
  width: 120px;
  height: 35px;
  animation: new-user-home-fixed-btn 2s infinite;
}

@-webkit-keyframes new-user-home-fixed-btn {
  0% {
    transform: scale(1);
  }

  25% {
    transform: scale(1.1);
  }

  50% {
    transform: scale(1);
  }

  75% {
    transform: scale(1.1);
  }
}

@keyframes new-user-home-fixed-btn {
  0% {
    transform: scale(1);
  }

  25% {
    transform: scale(1.1);
  }

  50% {
    transform: scale(1);
  }

  75% {
    transform: scale(1.1);
  }
}

.new-user-home-fixed-time {
  position: absolute;
  bottom: -26px;
  left: calc(50% - 47px);
  /* width: 90px; */
  height: 22px;
}

.new-user-home-fixed-time-count {
  float: left;
  /* width: 21px; */
  /* height: 21px; */
  padding: 5px 4px 5px 6px;
  /* line-height: 21px; */
  background: #ff683c;
  color: #fff;
  font-size: 14px;
  text-align: center;
  border-radius: 4px;
}

.new-user-home-fixed-time-text {
  float: left;
  line-height: 21px;
  margin: 0 5px 0 4px;
  font-size: 14px;
  color: #ca3003;
}

.new-user-home-fixed-close {
  background: url('//image.zlketang.com/public/news/homepage-sprite.png?x-image-process=cq100w100')
    no-repeat 60.163% 7.52%;
  background-size: 296px 372px;
  position: absolute;
  top: -30px;
  left: 0;
  width: 12px;
  height: 12px;
}

/* 新用户领课程弹窗          */

.new-user-home-dialog {
  z-index: 2022;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  /* width: 1920px; */
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
}

.new-user-home-dialog-cont {
  position: absolute;
  top: 174px;
  left: calc(50% - 260px);
  width: 523px;
  height: 491px;
}

.new-user-home-dialog-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 523px;
  height: 491px;
}

.new-user-home-dialog-btn {
  background: url('//image.zlketang.com/public/news/homepage-sprite.png?x-image-process=cq100w100')
    no-repeat 4.464% 49.209%;
  position: absolute;
  bottom: 21px;
  left: 153px;
  width: 225px;
  height: 78px;
  cursor: pointer;
  animation: new-user-home-dialog-btn 2s infinite;
}

@-webkit-keyframes new-user-home-dialog-btn {
  0% {
    transform: scale(1);
  }

  25% {
    transform: scale(1.1);
  }

  50% {
    transform: scale(1);
  }

  75% {
    transform: scale(1.1);
  }
}

@keyframes new-user-home-dialog-btn {
  0% {
    transform: scale(1);
  }

  25% {
    transform: scale(1.1);
  }

  50% {
    transform: scale(1);
  }

  75% {
    transform: scale(1.1);
  }
}

.new-user-home-dialog-time {
  position: absolute;
  bottom: 121px;
  left: 180px;
}

.new-user-home-dialog-time-count {
  float: left;
  /* width: 36px;
  height: 36px;
  line-height: 36px; */
  padding: 5px 4px 5px 6px;
  background: #ffffff;
  color: rgba(245, 147, 20, 1);
  font-size: 24px;
  text-align: center;
  border-radius: 8px;
}

.new-user-home-dialog-time-text {
  float: left;
  line-height: 36px;
  margin: 0 7px 0 8px;
  font-size: 24px;
  color: rgba(202, 48, 3, 1);
  cursor: pointer;
}

.new-user-home-dialog-close {
  background: url('//image.zlketang.com/public/news/homepage-sprite.png?x-image-process=cq100w100')
    no-repeat 60.163% 7.52%;
  background-size: 897px 1158px;
  position: absolute;
  top: -81px;
  left: 62px;
  width: 36px;
  height: 36px;
  cursor: pointer;
}

@media screen and (max-width: 1660px) {
  /* 新用户领课程悬浮窗 */

  .new-user-home-fixed {
    z-index: 2023;
    position: fixed;
    top: 154px;
    right: 64px;
    width: 94.5px;
    height: 77px;
    cursor: pointer;
  }

  .new-user-home-fixed-img {
    position: absolute;
    top: 0;
    left: 3.5px;
    width: 85.4px;
    height: 63px;
  }
  .new-user-home-fixed-btn {
    background: url('//image.zlketang.com/public/news/homepage-sprite.png?x-image-process=cq100w100')
      no-repeat 38.796% 48.185%;
    --zoom: 0.66;
    background-size: calc(var(--zoom) * 897px) calc(var(--zoom) * 1153px);
    position: absolute;
    top: 50.4px;
    left: calc(50% - 42px);
    width: 84px;
    height: 24.5px;
    animation: new-user-home-fixed-btn 2s infinite;
  }

  @-webkit-keyframes new-user-home-fixed-btn {
    0% {
      transform: scale(1);
    }

    25% {
      transform: scale(1.1);
    }

    50% {
      transform: scale(1);
    }

    75% {
      transform: scale(1.1);
    }
  }

  @keyframes new-user-home-fixed-btn {
    0% {
      transform: scale(1);
    }

    25% {
      transform: scale(1.1);
    }

    50% {
      transform: scale(1);
    }

    75% {
      transform: scale(1.1);
    }
  }

  .new-user-home-fixed-time {
    position: absolute;
    bottom: -18.2px;
    left: calc(50% - 31.5px);
    width: 70px;
    height: 15.4px;
  }

  .new-user-home-fixed-time-count {
    float: left;
    /* width: 14.7px; */
    height: 14.7px;
    line-height: 14.7px;
    background: #ff683c;
    color: #fff;
    font-size: 12px;
    text-align: center;
    border-radius: 3px;
    padding: 0;
  }

  .new-user-home-fixed-time-text {
    float: left;
    line-height: 14.7px;
    margin: 0 3.5px 0 3px;
    font-size: 12px;
    color: #ca3003;
  }

  .new-user-home-fixed-close {
    position: absolute;
    top: -21px;
    left: 0;
    width: 8.4px;
    height: 8.4px;
  }

  /* 新用户领课程弹窗          */

  .new-user-home-dialog {
    z-index: 100;
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
  }

  .new-user-home-dialog-cont {
    position: absolute;
    top: 121.8px;
    left: 50%;
    width: 366px;
    height: 343.7px;
    transform: translateX(-50%);
  }

  .new-user-home-dialog-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 366px;
    height: 343.7px;
  }

  .new-user-home-dialog-btn {
    background: url('//image.zlketang.com/public/news/homepage-sprite.png?x-image-process=cq100w100')
      no-repeat 4.464% 49.209%;
    position: absolute;
    bottom: 14.7px;
    left: 107px;
    width: 157.5px;
    height: 54.6px;
    cursor: pointer;
    animation: new-user-home-dialog-btn 2s infinite;
  }

  @-webkit-keyframes new-user-home-dialog-btn {
    0% {
      transform: scale(1);
    }

    25% {
      transform: scale(1.1);
    }

    50% {
      transform: scale(1);
    }

    75% {
      transform: scale(1.1);
    }
  }

  @keyframes new-user-home-dialog-btn {
    0% {
      transform: scale(1);
    }

    25% {
      transform: scale(1.1);
    }

    50% {
      transform: scale(1);
    }

    75% {
      transform: scale(1.1);
    }
  }

  .new-user-home-dialog-time {
    position: absolute;
    bottom: 84.7px;
    left: 138px;
  }

  .new-user-home-dialog-time-count {
    float: left;
    /* width: 25.2px;
  height: 25.2px;
  line-height: 25.2px; */
    padding: 5px 4px 5px 6px;
    background: #ffffff;
    color: rgba(245, 147, 20, 1);
    font-size: 17px;
    text-align: center;
    border-radius: 6px;
  }

  .new-user-home-dialog-time-text {
    float: left;
    line-height: 25.2px;
    margin: 0 5px 0 6px;
    font-size: 17px;
    color: rgba(202, 48, 3, 1);
    cursor: pointer;
  }

  .new-user-home-dialog-close {
    position: absolute;
    top: -56.7px;
    left: 43.4px;
    width: 25.2px;
    height: 25.2px;
    cursor: pointer;
  }
}
</style>
